@import '@assets/css/common.scss';

.btn-line {
    padding: 20px 20px 0;
    text-align: right;
}

.append-news {
    padding: 20px;

    .line-input {
        margin-bottom: 20px;

        .right-ipt-area {
            border: 1px solid #d9d9d9;
            @include position();

            &.warning {
                border-color: red;

                .warning-txt {
                    display: block;
                }
            }

            .warning-txt {
                display: none;
                width: 100%;
                height: 20px;
                line-height: 20px;
                font-size: $fzs;
                color: red;
                @include position(absolute, left, top, 0, 100%, 5)
            }
            .news-title-ipt {
                width: 100%;
                height: 30px;
                line-height: 20px;
                padding: 5px 10px;
            }
        }

        .txt-title {
            height: 32px;
            line-height: 32px;
            padding-right: 10px;
            font-size: $fzn;
            color: $cor5;
            margin-bottom: 5px;

            .star-dot {
                color: red;
                margin-right: 5px;
            }
        }
    }

    .ant-upload-select-picture-card i {
        font-size: 32px;
        color: #999;
    }

    .ant-upload-select-picture-card .ant-upload-text {
        margin-top: 8px;
        color: #666;
    }

    .ant-upload-list-picture-card {
        width: 100%;
    }

    .upload-area {
        height: 300px;
        .anticon-eye-o {
            display: none;
        }
    }

    .append-title {
        margin-bottom: 5px;
        height: 32px;
        line-height: 32px;
        font-size: $fzn;
        color: $cor5;

        .star-dot {
            color: red;
            margin-right: 5px;
        }

        .warning {
            color: #999;
            font-size: $fzs;
        }
    }

}

.party-graceful {

    .graceful-wrap {
        padding: 20px;

        .graceful-content {

            .news-list {
                width: 100%;
                padding-top: 40px;
                background: $bg9;

                .item-list {
                    @include position();

                    &:last-child {
                        div:last-child {
                            .line {
                                display: none;
                            }
                        }
                    }

                    .left-year {
                        width: 25%;
                        text-align: right;
                        font-size: $fzmh;
                        color: $cor7;
                        height: 48px;
                        padding: 0 20px 20px;
                        @include position();

                        .txt {
                            display: inline-block;
                            width: calc(100% - 40px);
                            @include position(absolute, left, top, 20px, -12px, 8);
                            line-height: 1;
                        }

                        .line {
                            width: 2px;
                            height: 100%;
                            @include position(absolute, right, top, -1px, 0px, 8);
                            background: #3C77D9;
                        }

                        .year-icon {
                            @include position(absolute, right, top, -10px, -10px, 9);
                            background-color: $bg9;
                        }
                    }

                    .right-content {
                        width: 75%;
                        margin-left: 25%;
                        padding: 20px 0;
                        @include position();

                        .dot {
                            width: 12px;
                            height: 12px;
                            border: 2px solid #E84F16;
                            border-radius: 50%;
                            background-color: $bg9;
                            @include position(absolute, left, top, -6px, -6px, 8);
                        }

                        .line {
                            width: 2px;
                            height: 100%;
                            @include position(absolute, left, top, -1px, 0px, 8);
                            background: #3C77D9;
                        }

                        .time {
                            width: 33.333%;
                            height: 20px;
                            line-height: 20px;
                            padding: 0 10px;
                            font-size: $fzn;
                            color: #fff;
                            text-align: right;
                            @include position(absolute, right, top, 100%, 0, 9);

                            .txt-2 {
                                width: calc(100% - 20px);
                                line-height: 1;
                                @include position(absolute, left, top, 10px, -6px, 8);
                            }
                        }

                        .news-content-wrap {
                            width: 95%;
                            margin: 0 auto 20px;
                            background: #fff;
                            padding: 10px;
                            border-radius: 5px;

                            .title {
                                color: #5E5F71;
                                font-size: $fzn;
                                line-height: 20px;
                                width: 100%;
                            }

                            .imgs-content {
                                margin-top: 10px;
                                width: 100%;
                                .img-item {
                                    width: 30%;
                                    margin-right: 5%;
                                    border-radius: 5px;
                                    margin-bottom: 20px;

                                    &:nth-child(3n) {
                                        margin-right: 0;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}